<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>用户管理</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript">
			$(function(){
				var pager = $('#userTable').datagrid('getPager');	// get the pager of datagrid
				pager.pagination({
					 pageSize:10,//每页显示的记录条数，默认为10 
				     pageList: [10,20,50,100],//可以设置每页记录条数的列表 
				     beforePageText: '第',//页数文本框前显示的汉字 
				     afterPageText: '页    共 {pages} 页', 
				     displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
				});	
			});
			
			function onReset(){			
				$("#userType").combobox('setValue', '0');
				$("#staffNo").val('');
				$("#loginName").val('');
			}
			
			function onQuery(){
				$('#userTable').datagrid({
					url: 'queryUser.do',
					pageNumber:1,				
					queryParams:{userType:$("#userType").combobox('getValue'),
						staffNo:$.trim($('#staffNo').val()),
						loginName:$.trim($('#loginName').val())}
								 
				});
			}
			
			function parseDay(date){
				if(date.toString().length == 1)
					return "0".concat(date);
				else
					return date;
			}
		</script>
	</head> 
	
	<body>
		<table id="userTable" class="easyui-datagrid" title="用户列表" style="width:700px;height:250px;"
 			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb', border:false,singleSelect:true,
 					fit:true,fitColumns:true,pagination:true,url:'queryUser.do'">
			<thead>
				<tr>
					<th data-options="field:'userTypeName',width:80,align:'center'">用户类型</th>
					<th data-options="field:'staff_no',width:120,align:'center'">工号</th>
					<th data-options="field:'login_name',width:120,align:'center'">登录名</th>
					<th data-options="field:'actual_name',width:120,align:'center'">姓名</th>
					<th data-options="field:'gender',width:80, align:'center', formatter:function(value){
							if(value == '${gender_men}')
							    return '男';
							else
								return '女';
						}">性别</th>
					<th data-options="field:'expiry_date',width:100,align:'center', formatter:function(value){
							var date = new Date(value);
							var outDate = date.getFullYear() + '-' + parseDay(date.getMonth() + 1 ) + '-' + parseDay(date.getDate());
							return outDate;
						}">有效期</th>
					<th data-options="field:'status',width:100,align:'center', formatter:function(value){
							if(value == '${statusActive}')
								return '激活';
							else
								return '未激活';
						}" >状态</th>
				</tr>
			</thead>
		</table>
		<div id="tb" style="padding:5px;height:auto">
			<div style="margin-bottom:5px">
				<a href="initAddUser" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
			</div>
			
			<form id="queryUserForm" name="queryUserForm" action="queryUser" method="post">
			<div>
				用户类型: 
				<select class="easyui-combobox" panelHeight="auto" id="userType" name="userType" style="width:100px">
					<option value="0" >---请选择---</option>
					<c:forEach var="code" items="${userTypeList}">
						<option value="${code.id}">${code.name}</option>	
					</c:forEach>
				</select>
				&nbsp;&nbsp;&nbsp;&nbsp;
				工号: <input class="easyui-validatebox" name="staffNo" id="staffNo" style="width:80px">
				&nbsp;&nbsp;&nbsp;&nbsp;
				登录名: <input class="easyui-validatebox" name="loginName" id="loginName" style="width:80px">
				&nbsp;&nbsp;
				<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
				<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
			</div>
			</form>
		</div>
	</body>
	
</html>